<template>
  <div>


    <Form ref="formInline" inline>
      <!--<Button type="primary" class="fl" icon="plus" @click="add">增加用户</Button>-->

    </Form>


    <Tabs>
      <TabPane label="项目信息">
        <Form ref="projectInfo" :model="projectInfo" :label-width="250" :rules="ruleInline">
          <FormItem label="项目名称" prop="title">
            <Input v-model="projectInfo.title" placeholder="项目名称"></Input>
          </FormItem>
          <FormItem label="招标编号" prop="project_code">
            <Input v-model="projectInfo.project_code" placeholder="招标编号"></Input>
          </FormItem>
          <!--<FormItem label="建设方" prop="project_code">-->
            <!--<Cascader :data="companyList" :load-data="loadUsersInCompany"></Cascader>-->
          <!--</FormItem>-->


          <FormItem label="建设方" prop="builder">
            <Select v-model="projectInfo.builder_id" style="width:400px;" @on-change="getUsersInCompanyBuilder">
              <Option
                v-for="item in companyList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="建设方负责人" prop="leader_builder">
            <Select v-model="projectInfo.leader_builder_id" style="width:400px;">
              <Option
                v-for="item in userListBuilder"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="承建方" prop="operators">
            <Select v-model="projectInfo.operators_id" style="width:400px;" @on-change="getUsersInCompanyOperators">
              <Option
                v-for="item in companyList"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}
              </Option>
            </Select>

          </FormItem>
          <FormItem label="承建方负责人" prop="leader_operators">
            <!--<Input v-model="projectInfo.leader_operators" placeholder="承建方负责人"></Input>-->
            <Select v-model="projectInfo.leader_operators_id" style="width:400px;">
              <Option
                v-for="item in userListOperators"
                :value="item.value"
                :key="item.value"
              >{{ item.label }}
              </Option>
            </Select>
          </FormItem>

          <FormItem label="签订日期">
            <DatePicker type="date" placeholder="签订日期" style="width: 200px"
                        v-model="projectInfo.contract_date"></DatePicker>
          </FormItem>
          <FormItem label="合同交付日期">
            <DatePicker type="date" placeholder="合同交付日期" style="width: 200px"
                        v-model="projectInfo.contract_delivery_date"></DatePicker>
          </FormItem>

          <FormItem label="合同分期">
            <InputNumber
              style="width: 200px"
              :min="1"
              :max="5"
              v-model="projectInfo.contract_payment_number">
            </InputNumber>
          </FormItem>

          <FormItem label="合同支付金额（单位：元）（第1笔）">
            <InputNumber
              style="width: 200px"
              :min="0"
              v-model="projectInfo.contract_amount1"
              :formatter="value => value/100"
              :parser="value => value*100"></InputNumber>
          </FormItem>
          <FormItem label="支付条件（第1笔）">
            <Input v-model="projectInfo.payment_terms1" placeholder="支付条件（第1笔）" type="textarea" :rows="4"></Input>
          </FormItem>

          <FormItem label="合同支付金额（单位：元）（第2笔）" v-if="projectInfo.contract_payment_number>1">
            <InputNumber
              style="width: 200px"
              :min="0"
              v-model="projectInfo.contract_amount2"
              :formatter="value => value/100"
              :parser="value => value*100"></InputNumber>
          </FormItem>
          <FormItem label="支付条件（第2笔）" v-if="projectInfo.contract_payment_number>1">
            <Input v-model="projectInfo.payment_terms2" placeholder="支付条件（第2笔）" type="textarea" :rows="4"></Input>
          </FormItem>

          <FormItem label="合同支付金额（单位：元）（第3笔）" v-if="projectInfo.contract_payment_number>2">
            <InputNumber
              style="width: 200px"
              :min="0"
              v-model="projectInfo.contract_amount3"
              :formatter="value => value/100"
              :parser="value => value*100"></InputNumber>
          </FormItem>
          <FormItem label="支付条件（第3笔）" v-if="projectInfo.contract_payment_number>2">
            <Input v-model="projectInfo.payment_terms3" placeholder="支付条件（第3笔）" type="textarea" :rows="4"></Input>
          </FormItem>

          <FormItem label="合同支付金额（单位：元）（第4笔）" v-if="projectInfo.contract_payment_number>3">
            <InputNumber
              style="width: 200px"
              :min="0"
              v-model="projectInfo.contract_amount4"
              :formatter="value => value/100"
              :parser="value => value*100"></InputNumber>
          </FormItem>
          <FormItem label="支付条件（第4笔）" v-if="projectInfo.contract_payment_number>3">
            <Input v-model="projectInfo.payment_terms4" placeholder="支付条件（第4笔）" type="textarea" :rows="4"></Input>
          </FormItem>

          <FormItem label="合同支付金额（单位：元）（第5笔）" v-if="projectInfo.contract_payment_number>4">
            <InputNumber
              style="width: 200px"
              :min="0"
              v-model="projectInfo.contract_amount5"
              :formatter="value => value/100"
              :parser="value => value*100"></InputNumber>
          </FormItem>
          <FormItem label="支付条件（第5笔）" v-if="projectInfo.contract_payment_number>4">
            <Input v-model="projectInfo.payment_terms5" placeholder="支付条件（第5笔）" type="textarea" :rows="4"></Input>
          </FormItem>

          <FormItem>
            <Button type="primary" @click="post('projectInfo',projectInfo)">保存</Button>
          </FormItem>
        </Form>
      </TabPane>
    </Tabs>


  </div>
</template>
<script>
  import {company, project,user} from "@/api/supervision";
  import {
    Button,
    DatePicker,
    Form,
    FormItem,
    Input,
    InputNumber,
    Modal,
    Option,
    Radio,
    RadioGroup,
    Select,
    TabPane,
    Tabs,
    Tag,
    Cascader
  } from "iview";
  //import {mapGetters} from "vuex";

  export default {
    components: {
      InputNumber,
      Button,
      Form,
      FormItem,
      Input,
      Tabs,
      TabPane,
      RadioGroup,
      Radio,
      Select,
      Option,
      Tag,
      Modal,
      DatePicker,
      Cascader
    },
    data() {
      return {
        projectInfo: {
          id: '',
          title: '',
          project_code: '',
          contract_date: '',
          contract_delivery_date: '',
          contract_payment_number: 1,
          contract_amount1: 0,
          contract_amount2: 0,
          contract_amount3: 0,
          contract_amount4: 0,
          contract_amount5: 0,

          operators_id: '',
          leader_operators_id: '',
          builder_id: '',
          leader_builder_id: '',
          payment_terms1: '',
          payment_terms2: '',
          payment_terms3: '',
          payment_terms4: '',
          payment_terms5: '',

        },
        ruleInline: {
          title: [{required: true, message: "必须填写项目名称", trigger: "blur"}],
          project_code: [{required: true, message: "必须填写项目编码", trigger: "blur"}],
        },

        companyList: [],
        userListBuilder:[],
        userListOperators:[],
      };
    },
    methods: {
      post(type, data) {

        if(type === 'projectInfo') {
          this.$refs["projectInfo"].validate(valid => {
            if(valid) {

              if(data.id) {
                //更新数据
                project.update(data.id, data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/supervision/project/list");
                  }
                });
              } else {
                //新增数据
                project.create(data).then(res => {
                  if(res.errno !== 0) {
                    this.$Message.error(res.errmsg);
                  } else {
                    this.$router.push("/supervision/project/list");
                  }
                });
              }
            } else {
              this.$Message.error("请填写必要信息");
            }
          });
        }
      },
      get(id) {
        project.getInfo(id, {}).then(res => {
          this.projectInfo = res.data;



          this.getUsersInCompanyOperators(this.projectInfo.operators_id)
          this.getUsersInCompanyBuilder(this.projectInfo.builder_id)
        });
      },

      async getCompanyList() {
        this.loading = true;
        const map = {all:true};
        let data = await company.getList(map);
        //console.log(data)
        this.companyList = data.data.map(item => {
          return {
            value: item.id,
            label: item.title,
            children: [],
            loading: false
          };
        });
        this.companyList.unshift({value: "", label: "请选择公司"});
        this.loading = false;
      },


      //async loadUsersInCompany(item, callback) {
      //  const map = {all:true,company_id:item.value};
      //  let data = await user.getList(map);
      //  item.children = data.data.map(item => {
      //    return {
      //      value: item.id,
      //      label: item.name,
      //    };
      //  });
      //},

      async getUsersInCompanyBuilder(company_id) {
        //console.log("11111");
        //console.log(company_id);

        this.loading = true;
        const map = {all:true,company_id:company_id};
        let data = await user.getList(map);
        //console.log(data)
        this.userListBuilder = data.data.map(item => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.userListBuilder.unshift({value: "", label: "请选择干系人"});
        this.loading = false;
      },


      async getUsersInCompanyOperators(company_id) {

        this.loading = true;
        const map = {all:true,company_id:company_id};
        let data = await user.getList(map);
        //console.log(data)
        this.userListOperators = data.data.map(item => {
          return {
            value: item.id,
            label: item.name,
          };
        });
        this.userListOperators.unshift({value: "", label: "请选择干系人"});
        this.loading = false;
      },

    },
    computed: {
      //...mapGetters(["getUser"])
    },
    async mounted() {
      await this.getCompanyList();

      if(this.$route.query.id) {
        this.get(this.$route.query.id);
      }



    }
  };
</script>
